<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <style>
        h1{
            text-align: center;
            background: url(images/fg.png);
        }
        h2{
            text-align: center;
        }
        #wa{
            border-spacing: 10px 20px;
        }
        #table{
            border-spacing: 10px 20px;
        }
        h3{
            text-align: left;
        }
    </style>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS CDN go here -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Other libraries go here -->

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->  

</head>

<body>

  <div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item"><a href="index1.html" class="nav-link ">Home</a></li>
        <li class="nav-item"><a href="login.html" class="nav-link  ">Login</a></li>
        <li class="nav-item"><a href="Profile.html" class="nav-link">Profile</a></li>
        <li class="nav-item"><a href="main.html" class="nav-link active" aria-current="page">main</a></li>
        <li class="nav-item"><a href="Setting .html" class="nav-link">Setting</a></li>
        <li class="nav-item"><a href="Community.html" class="nav-link">Community</a></li>
      </ul>
    </header>
  </div>
    <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon1">搜索</span>
        <input type="text" class="form-control" placeholder="Please enter the name of the food" aria-label="Please enter the name of the food" aria-describedby="basic-addon1">
      </div>
      
      <h1>Smart nutritionist</h1>
      <div class="work">
        <div class="row">
          <div class="col">
            <img src="images/55.png" height="40px">
            <div>Dietary analysis</div>
          </div>
          <div class="col">
            <img src="images/99.png" height="40px">
            <div>Search comparison</div>
          </div>
          <div class="col">
            <img src="images/00.png" height="40px">
            <div>Scan code comparison</div>
          </div>
        </div>
      </div>
        <div>
            <h2>Food classification</h2>
        </div>
        <div class="work">
            <div class="row">
              <div class="col">
                <img src="images/r.png" height="40px">
                <div>meat</div>
                <div class="col">
                    <img src="images/n.png" height="40px">
                    <div>Dairy</div>
                </div>
              </div>
              <div class="col">
                <img src="images/s.png" height="40px">
                <div>Fruits</div>
                <div class="col">
                    <img src="images/z.png" height="40px">
                    <div>Staple food category</div>
                </div>
              </div>
              <div class="col">
                <img src="images/c.png" height="40px">
               <div>Vegetables</div>
               <div class="col">
                <img src="images/d.png" height="40px">
                <div>Soybeans and products</div>
            </div>
              </div>
            </div>
          </div>
            <div>
                <h3>Dietary recommendations</h3>
                <p>1.Fish is a high protein, low-fat food that can meet the body's demand for meat without increasing the burden on the digestive system, which is beneficial for weight control.</p>
                <p>2.Spinach is rich in nutrients such as vitamin C, vitamin K, folate, and potassium, as well as plant compounds such as carotenoids, phytosterols, and saponins. These nutrients and compounds help provide the necessary nutrients for the human body and help maintain good health.</p>
                <p>3.Milk is rich in nutrients such as calcium, protein, and vitamin D, which are beneficial for bone health, muscle construction, and overall energy levels. However, lactose intolerant individuals should carefully choose suitable milk products</p>
                <div class="container">
                    <footer class="py-3 my-4">
                      <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
                        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
                        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
                        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
                        <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
                      </ul>
                      <p class="text-center text-body-secondary">&copy; 2024 Company, Inc</p>
                    </footer>
                  </div>
                

    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>
    <!-- Stuff for body goes here -->


    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->

    <!-- Link to scripts of your own -->
    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>
